<template>
	<Content title="保养完成">
		<view class="maintain-completed-box" style="padding-bottom: 160rpx">
			<view class="content content-bottom">
				<u-form labelPosition="left" :model="dataArr" labelWidth="120" labelAlign="left" :rules="rules"
					ref="uForm">
					<view class="content">
						<view class="title">协助维修人</view>
						<view class="simple-table-scroll" style="margin-top: 20rpx;">
							<view class="simple-table">
								<view class="simple-table-tr">
									<view class="simple-table-th simple-table-flex">姓名</view>
									<view class="simple-table-th simple-table-flex">工号</view>
									<view class="simple-table-th simple-table-flex">操作</view>
								</view>
								<view class="simple-table-tr" v-for="(item, index) in assisterList" :key="index">
									<view class="simple-table-td simple-table-flex">{{item.name}}</view>
									<view class="simple-table-td simple-table-flex">{{item.empno}}</view>
									<view class="simple-table-td simple-table-flex">
										<u-button class="delete-btn" type="error" hairline plain :throttleTime="1000"
											@click="delUser(index)">删除</u-button>
									</view>
								</view>
							</view>
						</view>
						<view class="add-btn" @click="addUser">+添加</view>
					</view>
					<!-- <u-form-item :borderBottom="true" labelPosition="top" label="协助保养人" prop="remark">
						<view class="user-box">
							<view class="box-item" v-for="(item, index) in dataArr.assisterList">
								<text class="label">姓名:</text>
								<u-input class="box-input" readonly label v-model="dataArr.assisterList[index].name"
									placeholder="请填写姓名" clearable></u-input>
								<text v-if="taskStatus == 1" class="del" @click="delUser(index)">删除</text>
							</view>
							<view v-if="taskStatus == 1" class="btn" @click="addUser">+添加</view>
						</view>
					</u-form-item> -->

					<u-form-item :borderBottom="true" labelPosition="top" label="保养内容" prop="remark">
						<view class="materia-list">
							<view class="materia-box" v-for="(item, index) in dataArr.itemList">
								<view class="box-l">
									<view class="box-item">
										<text class="label">保养项目:</text>
										<u-input class="box-input" label v-model="item.itemProject"
											placeholder="请填写保养项目" clearable></u-input>
									</view>
									<view class="box-item">
										<text class="label">基准:</text>
										<u-input class="box-input" label v-model="item.itemBase" placeholder="请填写基准"
											clearable></u-input>
									</view>
									<view class="box-item">
										<text class="label">方法:</text>
										<u-input class="box-input" label v-model="item.itemMethod" placeholder="请填写方法"
											clearable></u-input>
									</view>
									<view class="box-item">
										<text class="label">保养结果:</text>
										<u-radio-group class="box-input" v-model="item.result" placement="row">
											<u-radio label="正常" name="正常" style="margin-right: 20px"></u-radio>
											<u-radio label="异常" name="异常"></u-radio>
										</u-radio-group>
									</view>

									<view class="box-item">
										<text class="label">保养结果记录:</text>
										<u-textarea class="box-input" v-model="item.resultRecord"
											placeholder="请填写保养结果记录"></u-textarea>
									</view>
									<u-form-item :borderBottom="true" labelPosition="top" label="使用物料" prop="remark">
										<view class="materia-list">
											<view class="materia-box" v-for="(item, materIndex) in dataArr.itemList[index]
                          .materialList">
												<view class="box-l">
													<view class="box-item">
														<text class="label">品名:</text>
														<!-- 	<u-input class="box-input" label v-model="item.goodsName"
															placeholder="请填写品名" clearable></u-input> -->
														<uni-data-select class="box-input" v-model="item.goodsName"
															:localdata="materielNoList" showInput
															@blur="materielNoChangeAdd"
															@inputChange="materielNoChangeAdd" placeholder="请选择"
															@change="
															materieChange(
															  item.goodsName,
															  index,
															  materIndex
															)
														  "></uni-data-select>
													</view>
													<view class="box-item">
														<text class="label">物料号:</text>
														<u-input class="box-input" label disabled v-model="item.code"
															placeholder="请填写物料号" clearable></u-input>
													</view>
													<view class="box-item">
														<text class="label">规格:</text>
														<u-input class="box-input" label disabled
															v-model="item.specification" placeholder="请填写规格"
															clearable></u-input>
													</view>
													<view class="box-item">
														<text class="label">数量:</text>
														<u-input class="box-input" label v-model="item.qty"
															placeholder="请填写数量" clearable></u-input>
													</view>
												</view>
												<view class="box-r">
													<text v-if="taskStatus == 1" class="del"
														@click="delMaterial(index, materIndex)">删除</text>
												</view>
											</view>
											<view v-if="taskStatus == 1" class="btn" @click="addMaterial(index)">+添加
											</view>
										</view>
									</u-form-item>

									<u-form-item :borderBottom="true" labelPosition="top" label="使用工具" prop="remark">
										<view class="materia-list">
											<view class="materia-box" v-for="(item, toolIndex) in dataArr.itemList[index]
                          .toolList">
												<view class="box-l">
													<view class="box-item">
														<text class="label">工具名称:</text>
														<uni-data-select class="box-input" v-model="item.toolName"
															:localdata="materielNoList" showInput
															@blur="materielNoChangeAdd"
															@inputChange="materielNoChangeAdd" placeholder="请选择"
															@change="
															toolChange(
															  item.toolName,
															  index,
															  toolIndex
															)
														  "></uni-data-select>
														<!-- <u-input class="box-input" label v-model="item.toolName"
															placeholder="请填写工具名称" clearable></u-input> -->
													</view>

													<view class="box-item">
														<text class="label">工具物料号:</text>
														<u-input class="box-input" label disabled
															v-model="item.toolCode" placeholder="请填写工具物料号"
															clearable></u-input>
													</view>
													<view class="box-item">
														<text class="label">数量:</text>
														<u-input class="box-input" label v-model="item.qty"
															placeholder="请填写数量" clearable></u-input>
													</view>
													<view class="box-item">
														<text class="label">保管方式:</text>
														<u-input class="box-input" label v-model="item.toolMode"
															placeholder="请填写保管方式" clearable></u-input>
													</view>
												</view>
												<view class="box-r">
													<text v-if="taskStatus == 1" class="del"
														@click="delUsingTools(index, toolIndex)">删除</text>
												</view>
											</view>
											<view v-if="taskStatus == 1" class="btn" @click="addUsingTools(index)">+添加
											</view>
										</view>
									</u-form-item>
								</view>
								<!-- <view class="box-r">
									<text class="del" @click="delMaintain(index)">删除</text>
								</view> -->
							</view>
							<!-- <view class="btn" @click="addMaintain">+添加</view> -->
						</view>
					</u-form-item>
					<view class="btn-v">
						<view class="but-box">
							<u-button class="btn" @click="close" text="取消"></u-button>
							<u-button v-if="taskStatus == 1" class="btn" type="primary" @click="checkManitain"
								text="保养完成"></u-button>
							<!-- <u-button v-if="taskStatus==2" class="btn" type="primary" @click="accept"
								text="完成确认"></u-button> -->
						</view>
					</view>
				</u-form>
			</view>
		</view>
	</Content>
</template>

<script>
	import Content from "@/components/content/index.vue";
	import {
		getPageData,
		getUserInfo
	} from "@/store/user";
	import fetch from "@/utils/fetch";
	export default {
		options: {
			multipleSlots: true,
		},
		components: {
			Content,
		},
		data() {
			return {
				taskStatus: "",
				storageKey: 'maintainHallOperate',
				userInfo: {},
				//参观调研、维保检验、活动参会、备航参航text:'',value:''
				materielNoList: [],
				model: {
					boardingDate: "",
					carPlateNo: "",
					contractPerson: "",
					dinerNumber: 0,
					idCardNo: "",
					leaveDate: "",
					mobile: "",
					name: "",
					originIncident: "",
					remark: "",
					shipId: "",
					workUnit: "",
					approveComment: "",
				},
				rules: {
					name: {
						type: "string",
						required: true,
						message: "请填写姓名",
					},
				},
				fileList: [],
				userData: [],
				materialData: [],
				maintainData: [{}, {}],
				usingToolsData: [],
				assisterList: [],
				dataArr: {},
				dataArr: {

				},
				detailObj: {},
				assisterList: [],
			};
		},
		onReady: function() {
			this.userInfo = getUserInfo();
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		onShow: function() {
			// const data = uni.getStorageSync("getSelectLists") || [];
			// console.log(data);
			// this.dataArr.assisterList = Array.isArray(data) ?
			// 	data.map((item) => {
			// 		return {
			// 			name: item.name,
			// 			userId: item.id,
			// 		};
			// 	}) : [];
			const selections = uni.getStorageSync(this.storageKey) || [];
			this.assisterList = Array.isArray(selections) ?
				selections.map((item) => {
					return {
						userId: item.id,
						name: item.name,
						...item,
					};
				}) : [];
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.id = option.id;
			this.taskStatus = option.status;
		},
		mounted() {
			this.$loading.open();
			this.getDetail();
			const data = getPageData();
			if (this.type == "edit") {
				this.shipData = data;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(new Date(), "yyyy-mm-dd hh:MM");
				this.model.boardingDate = timeValue;
				this.model.shipId = data.id;
			} else {
				this.model = data;
			}
			this.$loading.close();
		},
		methods: {
			close() {
				uni.navigateBack({
					delta: 1, //返回上一页
				});
			},
			delUser(index) {
				this.dataArr.assisterList.splice(index, 1);
			},
			getDetail() {
				fetch("get", "/dms/servicingPlan/selectPlanById", {
					id: this.id,
				}).then((res) => {
					this.dataArr = res.data;
					const data = uni.getStorageSync("getSelectLists") || [];
					console.log(data);
					this.dataArr.assisterList = Array.isArray(data) ?
						data.map((item) => {
							return {
								name: item.name,
								userId: item.id,
							};
						}) : [];
				});
			},
			// addUser() {
			// 	this.userData.push({
			// 		name: "",
			// 		id: ""
			// 	});
			// },
			addUser() {
				uni.navigateTo({
					url: "/pages/common/operator/index?storageKey=" + this.storageKey + '&multiple=true',
					animationType: "pop-in",
				});
			},
			delMaterial(index, materIndex) {
				this.dataArr.itemList[index].materialList.splice(materIndex, 1);
			},
			addMaterial(index) {
				this.dataArr.itemList[index].materialList.push({
					code: "",
					goodsName: "",
					specification: "",
					qty: 1,
				});
			},
			// delMaintain(index,toolIndex) {
			// 	this.dataArr.itemList[index].materialList.splice(toolIndex, 1);
			// },
			// addMaintain(index) {
			// 	this.dataArr.itemList[index].materialList.push({
			// 		toolCode: "",
			// 		toolName: "",
			// 		toolMode: "",
			// 		qty: 1,
			// 	});
			// },
			delUsingTools(index, toolIndex) {
				this.dataArr.itemList[index].toolList.splice(toolIndex, 1);
			},
			addUsingTools(index) {
				this.dataArr.itemList[index].toolList.push({
					toolCode: "",
					toolName: "",
					toolMode: "",
					qty: 1,
				});
			},
			checkManitain() {
				this.$refs.uForm.validate().then((valid) => {
					if (valid) {
						this.dataArr.assisterList = this.assisterList
						fetch("post", "/dms/servicingTask/complete", this.dataArr).then(
							(res) => {
								uni.$emit("openToast", {
									type: "success",
									title: "操作成功",
									complete() {
										uni.navigateBack({
											delta: 1, //返回上一页
										});
									},
								});
							}
						);
					} else {}
				});
			},
			materielNoChangeAdd(val, value) {
				if (
					val &&
					this.materielNoList.find(
						(item) => item.materialCode + "-" + item.materialName === val
					)
				) {
					return;
				}
				const params = {
					materialName: val,
					pageNum: 1,
					pageSize: 9999,
				};
				this.$loading.open();
				fetch("post", "/dms/material/page", params).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.materielNoList = res.data.records.map((item) => {
								return {
									...item,
									text: item.materialName,
									value: item.materialName,
								};
							});
						}
						if (value) {
							this.dataArr.bomId = Number(value);
						}
					}
				});
			},
			materieChange(val, index, materIndex) {
				console.log("val, index", val, index, materIndex);
				if (!val) {
					this.$set(this.dataArr.itemList[index]
						.materialList, materIndex, {
							code: "",
							goodsName: "",
							specification: "",
							qty: 1,
						});
					return;
				}
				console.log(this.dataArr.itemList[index]
					.materialList)
				const obj = this.materielNoList.find((item) => item.materialName === val);
				console.log(obj, 'obj')
				if (obj) {
					this.$set(
						this.dataArr.itemList[index]
						.materialList,
						materIndex, {
							code: obj.materialCode,
							goodsName: obj.materialName,
							specification: obj.materialModel,
							qty: this.dataArr.itemList[index]
								.materialList[materIndex].qty,
						}
					);
				}
			},
			toolChange(val, index, toolIndex) {
				console.log("val, index", val, index, toolIndex);
				if (!val) {
					this.$set(this.dataArr.itemList[index]
						.toolList, toolIndex, {
							toolCode: "",
							toolName: "",
							toolMode: "",
							qty: 1,
						});
					return;
				}
				console.log(this.dataArr.itemList[index]
					.toolList)
				const obj = this.materielNoList.find((item) => item.materialName === val);
				console.log(obj, 'obj')
				if (obj) {
					this.$set(
						this.dataArr.itemList[index]
						.toolList,
						toolIndex, {
							toolCode: obj.materialCode,
							toolName: obj.materialName,
							toolMode: this.dataArr.itemList[index]
								.toolList[toolIndex].materialModel,
							qty: this.dataArr.itemList[index]
								.toolList[toolIndex].qty,
						}
					);
				}
			},
			accept() {
				if (!this.detailObj.serveScore) {
					uni.$emit("openToast", {
						type: "error",
						title: "服务态度评分不能为空",
					});
					return;
				}
				if (!this.detailObj.technologyScore) {
					this.$Message.warning({
						content: this.$t("技术能力评分不能为空"),
						duration: 6,
						closable: true,
					});
					return;
				}
				if (!this.detailObj.responseScore) {
					this.$Message.warning({
						content: this.$t("响应速度评分不能为空"),
						duration: 6,
						closable: true,
					});
					return;
				}

				if (!this.detailObj.evaluate) {
					this.$Message.warning({
						content: this.$t("请输入评语"),
						duration: 6,
						closable: true,
					});
					return;
				}

				this.axios({
					method: "post",
					url: "/dms/servicingTask/accept",
					data: {
						id: this.id,
						...this.detailObj,
					},
				}).then((res) => {
					if (res.code === 200) {
						this.$Message.success(res.msg);
						this.backPage();
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import '@/static/styles/hall-operate.scss';

	.maintain-completed-box {
		padding: 20rpx;
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;

		/deep/ .u-form-item__body__left__content__label {
			margin-left: 20rpx;
		}

		// /deep/ .uni-select {
		//     border: none;
		//     border-bottom: none;
		//     line-height: 26px;
		//     height: 24px !important;
		//     padding-left: 0;
		// }

		/deep/ .uni-select__input-placeholder {
			color: #cbc9cc !important;
			font-size: 15px !important;
		}
	}

	.content {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
	}

	.content-bottom {
		flex: 1;
	}

	.data-select {
		/deep/ .uni-select__selector {
			top: -155px;

			.uni-popper__arrow {
				display: none;
			}
		}
	}

	.box-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.label {
			width: 130rpx;
		}

		.box-input {
			margin: 0 20rpx;
		}
	}

	.del {
		color: #a30014;
	}

	.materia-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e0e0e0;
		margin-bottom: 20rpx;

		.box-l {
			flex: 1;
		}

		.box-r {}
	}

	.user-box,
	.materia-list {
		width: 100%;
		padding: 20rpx 40rpx;

		.btn {
			width: 100%;
			text-align: center;
			color: #3c9cff;
		}
	}
</style>